<template>
  <div class="user-container">
    <!-- 登陆 -->
    <mt-popup v-model="visiblePopup.login" :closeOnClickModal="true" :modal="false" position="bottom"
              class="modal-popup">
      <div class="my-header">
        <strong>餐饮登录</strong>
      </div>
      <mt-field label="用户名" placeholder="请输入用户名" v-model="usename"></mt-field>
      <mt-field label="密码" placeholder="请输入密码" type="password" v-model="password"></mt-field>
      <div class="loginbutn">
        <mt-button type="primary" style="width: 90%" @click="login">登录</mt-button>
      </div>
      <div class="other-link">
        <!--        <span @click="()=>visiblePopup.registered=true">手机快速注册</span>-->
        <span @click="goChangePw" style="float: right ;margin-right: .5rem">修改密码</span>
      </div>

    </mt-popup>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  export default {
    name: "CyLogin",
    data() {
      return {
        usename: '',
        password: '',
        visiblePopup: {
          login: true,
          registered: false,
          registeredCode: false,
          forget: false,
          forgetCode: false,
          registeredFormId: false,
          forgetResetPassword: false
        },
      }
    },
    methods: {
      login() {
        if (this.usename == undefined) {
        }
        // //这种参数包装ie浏览器接不到参数
        // let param = new URLSearchParams();
        // param.append('key', '52a4b8a337f42dd376661f8b61c7ba6d');
        //包装数据 传给后台是key:value，不知道为啥不包装传给后台的json字符串{key:"xxx"}
        let postData = this.$qs.stringify({
          username: this.usename,
          password: this.password,
        });
        //请求网络登录
          this.$axios.get(this.$apis.login, postData
          ).then(res => {
            console.log(res);
            if(res.data.code===201){
              //登录成功
              this.$router.push(("/"))
            }else {
              // this.$toast({
              //   message:res.data.msg,
              //   position: 'bottom',
              //   duration: 5000
              // })
            }
          })
            .catch(error => {
              alert(error)
            })
        },
      goChangePw() {
        this.$router.push("/changepw")
      }
    }

  }
</script>

<style scoped>
  .loginbutn {
    margin: 30px 0;
    width: 100%;
    text-align: center;
  }

  .modal-popup {
    width: inherit;
    height: inherit;
  }

  .user-container {
    height: 100%;
    width: 100%;
  }

  .my-header {
    display: flex;
    padding: 10px;
    background: #fff;
  @include flexbox(space-between, center, row, nowrap);
    margin-bottom: 30px;
  }

  strong {
    margin-top: 10px;
    font-size: 18px;
    font-weight: normal;
    color: #333;
  }

  .other-link {
  @include flexbox(space-between,
  center,
  row,
  nowrap);
    font-size: 15px;
    color: #81838e;
    margin: 10px;
  }

</style>
